<template>
  <div id='tmpl'>
      <div id="desc">
          <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>{{photoinfo.add_time | datafmt("YYYY-MM-DD HH:mm:ss")}}  {{photoinfo.click}}次浏览</p>
                <p class="line"></p>
          </div>
          <div class="mui-content">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li v-for="(item ,index) in list" :key="index" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                   
                        <img :src="item.src" class="preview-img" height="100" @click="$preview.open(index, list)"> 
                    
                </li>
            </ul> 
         </div>
    <p>
        {{photoinfo.content}}
    </p>
      </div>
      <div id="comment">
            <comment :id="id"></comment>
      </div>
  </div>
</template>
<script>
import comment from "../subcom/comment.vue";
import common from "../../kits/common.js";
import { Toast } from 'mint-ui';
export default {
    components:{
        comment
    },
  data () {
    return {
        id:0,
        photoinfo:{},
        list:[
        ]
    };
  },
  created(){
      this.id=this.$route.params.id;
      this.getinfo();
      this.getimgs();
  },
  methods:{
      getinfo(){
          var url=common.apidomain+"/api/getimageInfo/"+this.id;
          this.$http.get(url).then(function(response){
                var body=response.body;
                if(body.status != 0){
                    Toast(body.message);
                    return;
                };
                this.photoinfo=body.message[0];
          })
      },
      getimgs(){
          var url=common.apidomain+"/api/getthumimages/"+this.id;
          this.$http.get(url).then(function(response){
                var body=response.body;
                if(body.status != 0){
                    Toast(body.message);
                    return;
                };
                body.message.forEach(function(item){
                    var img=new Image()
                    img.src=item.src
                    item['h']=img.height;
                    item['w']=img.width;
                });
                this.list=body.message;
          })
      }
  }
}
</script>
<style lang="css" scoped>
    #desc{
        padding:10px;
    }
    #desc .title h4{
        color:#0094ff;
    }
    #desc .title p{
        color:rgba(0,0,0,0.4);
        margin-top: 10px;
    }
    #desc .title .line{
        height: 1px;
        border-top: 1px solid rgba(0, 0, 0,0.4);
    }
    .mui-grid-view.mui-grid-9{
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell{
    border-right:0;
    border-bottom:0;
  }
.mui-grid-view.mui-grid-9{
  border-top:0;
}
.mui-content img{
    width: 100px;
    height: 100px;
}
</style>